/**
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * 
 * @include "/ictinus/src/ictinus.js"
 * @include "/ictinus/src/ictinus.drawTypes.js"
 * @include "/ictinus/src/ictinus.Shape.js"
 * @include "/ictinus/src/svgimport.js"
 * @include "/ictinus/src/test/sample-shape.js"
 * @include "/jTweener/src/jTweener-doc.js"
 */

$(function() {
	
	/**
	 * Копирует анимируемые свойства в новый объект. Это нужно делать
	 * для анимаций, чтобы убирать и не анимировать ненужные методы их
	 * объекта типа ictinus.drawTypes.Item
	 * 
	 * @param {ictinus.drawTypes.Item} item Элемент рисования, с которого нужно скопировать свойства
	 * @return {Object}
	 */
	function copyProps(item) {
		var result = {};
		item.walkOnCoords(function(prop, type){
			result[prop] = this[prop];
		});

		return result;
	}

	/** Форма рисования */
	var shape = ictinus.Shape.fromJSON(sample_shape2);

	/** Элементы рисования формы */
	var paths = shape.getPaths();

	// сразу же делаю копии координат у каждого элемента рисования
	shape.traverse(function(/* ictinus.drawTypes.Item */item) {
		item._original = copyProps(item);
	}, paths);

	/** Точка, откуда должна стартовать анимация */
	var anchor = {
		x : -20,
		y : -20
	};

	var is_visible = false;

	var ns = 'shape';
	var cv = document.getElementById('canvas-test');
	
	jTweener.addNSAction({onUpdate: function(){
		shape.decorate(cv, paths);
//		shape.draw(cv, paths);
	}}, ns);

	var anim_params = {
		time : 2,
		namespace : ns,
		transition : 'easeoutelastic'
	};

	/**
	 * Гипотенуза между двумя инструкциями рисования
	 * @param {ictinus.drawTypes.Item} a 
	 * @param {ictinus.drawTypes.Item} b 
	 */
	function hypot(a, b) {
		return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
	}
	
	/**
	 * Функция сортировки массива по удаленности от точки старта
	 * анимации
	 */
	var sortFar = function(a, b) {
		return  hypot(b._original, anchor) - hypot(a._original, anchor);
	};

	/**
	 * Функция сортировки массива по приближенности к точке старта
	 * анимации
	 */
	var sortNear = function(a, b) {
		return  hypot(a._original, anchor) - hypot(b._original, anchor);
	};
	
	$('#clicker').click(function(){
		if (is_visible) {
			hide();
		} else {
			show();
		}
		
		is_visible = !is_visible;
	});
	
	function show(){
		shape.traverse(function(/* ictinus.drawTypes.Item */ item, i){
			// выставляем все координаты в стартовое положение
			item.walkOnCoords(function(prop, type){
				this[prop] = anchor[type];
			});
			
			// анимируем
			$t(item, anim_params).stop().tween(item._original, {delay: i * 0.015});
		}, paths, sortFar);
	}
	
	function hide(){
		
		shape.traverse(function(/* ictinus.drawTypes.Item */ item, i){
			var target_state = {};
			// записываем, куда должны прийти все точки (target_state)
			item.walkOnCoords(function(prop, type){
				target_state[prop] = anchor[type];
			});
			
			// анимируем
			$t(item, anim_params).stop().tween(target_state, {delay: i * 0.015, transition: 'easeinoutcubic', time: 0.6});
		}, paths, sortNear);
	}
	
});
